<template>
  <footer>
      <div class="container">
        <div class="top">
          <div class="item" v-for="(item, index) in footer.data" :key="index">
            <p class="title">{{item.title}}</p>
            <a :href="child.link" v-for="(child, childIndex) in item.list" :keu="childIndex">{{child.text}}</a>
          </div>
          <div class="item">
            <div class="links">
              <div>
                <a class="iconfont icon-youtube"></a>
                <a class="iconfont icon-tian7_facebook"></a>
                <a class="iconfont icon-instagram"></a>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="container">
            <p>Copyright 2018 Swellpro Technology Co.,Ltd</p>
            <a :href="service.link" v-for="(service, serviceIndex) in footer.service" :key="serviceIndex">{{service.text}}</a>
          </div>
        </div>
      </div>
  </footer>
</template>

<script>
export default {
  data () {
    return {
      footer: {
            data: [
                {
                    title: 'Products',
                    list: [
                        {
                            text: 'SplashDrone 3+',
                            link: '/waterproof-splash-drone.html'
                        },
                        {
                            text: 'Spry Drone',
                            link: '/spry.html'
                        },
                        {
                            text: 'DronePower 45k',
                            link: ''
                        },
                        {
                            text: 'GC3',
                            link: ''
                        },
                        {
                            text: 'PL3',
                            link: ''
                        },
                        {
                            text: 'PL4',
                            link: ''
                        },
                        {
                            text: 'SAR1',
                            link: ''
                        },
                        {
                            text: 'SAR2',
                            link: ''
                        },
                    ]
                }, 
                {
                    title: 'Shopping',
                    list: [
                        {
                            text: 'Swellpro Store',
                            link: 'https://store.swellpro.com'
                        },
                        {
                            text: 'Find a Reseller',
                            link: ''
                        },
                    ]
                },
                {
                    title: 'Support',
                    list: [
                        {
                            text: 'Tutorial Videos',
                            link: '/video.html'
                        },
                        {
                            text: 'Download',
                            link: '/download.html'
                        },
                        {
                            text: 'FAQ',
                            link: '/faq.html'
                        },
                        {
                            text: 'After Service',
                            link: '/service.html'
                        },
                    ]
                }, 
                {
                    title: 'Company',
                    list: [
                        {
                            text: 'About Us',
                            link: ''
                        },
                        {
                            text: 'News',
                            link: ''
                        },
                        {
                            text: 'Blog',
                            link: ''
                        },
                        {
                            text: 'Contact Us',
                            link: '/contact.html'
                        },
                        {
                            text: 'Become a Reseller',
                            link: '/reseller.html'
                        },
                        {
                            text: 'Become a Affiliate',
                            link: 'https://store.swellpro.com/pages/affiliate'
                        },
                    ]
                }, 
            ],
            service: [
                {
                    text: 'Privacy Policy',
                    link: '/policy.html'
                },
                {
                    text: 'Terms of Use',
                    link: '/policy.html'
                }
            ],
        }
    };
  },

  computed: {},

  mounted() {},

  methods: {}
}

</script>
<style lang='stylus' scoped>
footer
  background #1a1a1a
  .container
    .top
      width 100%
      display flex
      padding 30px 0 18px
      border-bottom 1px solid #C3CBCF
      .item
        flex 1
        .title
          color #fff
          font-weight 400
          letter-spacing 1px
          margin-bottom 16px
          font-size 14px
        a
          font-size 12px
          margin-bottom 12px
          color #fff
          display block
          letter-spacing 1px
        .links
          display flex
          justify-content flex-end
          align-items flex-end
          width 100%
          height 100%
          a
            color #8B989E
            font-size 35px
            margin-left 20px
            display inline-block
            transition all .3s
            cursor pointer
            &:hover
              color #f15e2a
    .bottom
      padding 20px 0
      .container
        padding 0
        display flex
        a
          display block
          font-size 12px
          padding 0 20px
          border-right 1px solid #C3CBCF
          color #c3cbcf
          &:last-child
            border none
        p
          font-size 12px
          color #C3CBCF
          margin-right 20px
</style>